<template>
  <div class="iphone">
    <h2>找工作来跟老板谈</h2>
    <h3>皮皮网</h3>
    <van-field
      @click-right-icon="$toast('question')"
      clearable
      label="+86 ∨"
      label-width="50"
      placeholder="请输入您的手机号码"
      v-model="username"
    />
    <van-field clearable placeholder="请输入密码" type="password" v-model="password" />
    <van-field clearable placeholder="请确认密码" type="password" v-model="password2" />
    <van-button :disabled="true&&isflay" @click="sub_phone" class="btn" type="primary">下一步</van-button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: '',
      password: '',
      password2: '',
      postRegister: []
    }
  },
  methods: {
    async sub_phone () {
      if (!this.ispassword) return this.$Toast('两次密码不一样')
      var obj = {
        utel: this.username,
        pwd: this.password
      }
      // 注册
      const res = await this.$http.post('/register', obj)
      // console.log('注册', res, obj)
      const {
        data: { status, msg }
      } = res
      if (status !== 1) return this.$Toast(msg)
      // 给默认名加头像和昵称
      await this.$http.post('/register1', { utel: this.username })
      this.$Toast(msg)
      setTimeout(() => {
        this.$router.push('/login')
      }, 1000)
    }
  },
  computed: {
    isflay () {
      return !/^1[3-9]{2}\d{8}$/g.test(this.username)
    },
    ispassword () {
      return (
        /\w{6,}/.test(this.password) &&
        /\w{6,}/.test(this.password2) &&
        this.password === this.password2
      )
    }
  }
}
</script>

<style lang='less' scoped>
.iphone {
  .btn {
    width: 100%;
    margin: 20px 0 15px 0;
  }
  h2 {
    text-align: center;
    color: beige;
  }
  h3 {
    text-align: center;
    color: beige;
    font-weight: bold;
  }
}
</style>
<style scoped>
.iphone >>> .van-cell {
  border-radius: 20px;
  border: 1px solid #ccc;
  margin-bottom: 5px;
}
</style>
